<template>
    <div>
        <tableCom :list="list">
            <template #left="{ row }">
                <button @click="cha(row)">查看</button>
                <button @click="del(row.id)">删除</button>
            </template>
        </tableCom>
        <showCom :showCom="showCom" title="编辑数据">
            <form>
                姓名<input type="text" v-model="formData.name"><br>
                性别<input type="text" v-model="formData.age">
                <div>
                    <button @click="btn">取消</button>
                    <button @click="submit">确认</button>
                </div>
            </form>
        </showCom>
    </div>
</template>
<script>
import tableCom from './slot/tableCom.vue'
import showCom from './slot/showCom.vue'
export default {
    components: {
        tableCom,
        showCom
    },
    data() {
        return {
            formData: '',
            list: [
                { id: '1', name: '刘备', age: 38 },
                { id: '2', name: '曹操', age: 40 },
                { id: '3', name: '孙权', age: 28 }
            ],
            showCom: false
        }
    },
    created() {
    },
    computed: {
    },
    methods: {
        del(id) {
            console.log(id)
            this.list = this.list.filter(item => item.id !== id)
        },
        cha(row) {
            this.showCom = true
            this.formData =JSON.parse(JSON.stringify(row))
        },
        btn(){
            this.showCom = false
        },
        submit(){
            var obj = this.list.find(item => item.id == this.formData.id)
            obj.name = this.formData.name
            obj.age = this.formData.age
            this.showCom = false
        }
    }
}
</script>
<style lang='less'  scoped></style>
